<template>
    <el-dialog  width="1000px" :visible="detailVis" @close="closeFn">
        <template slot="title">
            <div class="title">
                <div class="left">
                    <img :src="detailObj.avatar" alt="">
                </div>
                <div class="center">
                    <h6>{{detailObj.customerName}}</h6>
                    <p>{{detailObj.label}}</p>
                </div>
                <div class="right">
                    <h4>{{detailObj.articleTitle}}</h4>
                    <p>{{parseTime(detailObj.createTime)}}</p>
                </div>
            </div>
        </template>
        <div class="content">
            {{detailObj.articleText}}
        </div>
    </el-dialog>
</template>
<script>
export default {
    props:{
        detailObj:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        detailVis:{
            type:Boolean,
            default:false
        }
    },
    methods:{
        closeFn(){
            this.$emit('update:detailVis',false)
        }
    }
}
</script>
<style lang="scss" scoped>
*{
    margin: 0;
    padding:0;
}
    .title{
        width: 100%;
        height: 80px;
        border-bottom: 2px solid black;
        
        display: flex;
        .left{
            width: 48px;
            padding-top: 20px;
            padding-left: 12px;
            background: rgba(245,245,245);
            // margin-right:20px;

            img{
                width: 100%;
                height: 36px;
                border-radius: 50%;
            }
        }
        .center{
            background: rgba(245,245,245);
            min-width: 180px;
            padding-left: 20px;
            padding-top: 20px;
            margin-right:20px;
            h6{
                font-size: 16px;
                font-weight: 600;
                margin-bottom: 4px;
            }
            p{
                font-size: 14px;
                font-weight: 400;
            }
        }
        .right{
            flex: 1;
            h4{
                font-size: 18px;
                font-weight:700;
                line-height: 24px;
            }
            p{
                font-size:14px;
                margin-top:4px;
            }
        }
    }
    .content{
        width: 100%;
        text-indent:24px;
        font-size:16px;
        max-height:800px;
        overflow-y:auto;
    }
</style>